Add ids in architecture diagrams

[quilicicf]

Suggestion

Add ids to SVG elements in architecture diagrams to make it easier to style them.

Reason

My use case is animating the SVGs with Reveal.js fragments.

I can already do this with flowcharts since it's already done on this type of diagrams.

Exemple : making arrows appear one by one (tap ⬇ repeatedly to animate the graph on the right).

PoC

I've PoCed this in my fork, I can open a PR if you want to integrate the change.

I've only added ids to services and groups for now, we'd still need to :

• Validate how ids should be built
• Add ids to links/junctions

Note

To write tests for this feature, I had to run the renderer's draw method or battle with an army of mocks. I suggested an improvement in my work to use D3's test method using jsdom as a mock DOM instead of mocking D3.

I think it improves the tests greatly but it makes the PR a bit bulkier. I can split the work in two PRs, or only contribute the functional part (although it won't be tested then) as it suits you best.